<template>
	<view>
		<!-- F1:导航条 -->
		<view class="search-bar">
			<!-- 左侧得到后退按钮 -->
			<uni-icons class='icon' type="back" color="#fff" size="26" @click="back"></uni-icons>
			<!-- 搜索框 -->
			<uni-search-bar
			v-model="kw"
			cancelButton="none" 
			class='input' @confirm="" 
			placeholder="请输入商品关键字"
			@confirm="search"/>
		</view>
		<!-- F2:搜索结果 -->
		<!-- <text>{{pager}}</text> -->
		<uni-list>
			<uni-list-item
			 v-for="(item,i) in pager.data" 
			 :key="item.pid" 
			 :title="item.title"
			 ellipsis="1" 
			 :thumb="$url.base+item.pic"
			 link='navigateTo'
			 :to="`../product-details/product-details?pid=${item.lid}`"
			 ></uni-list-item>
		</uni-list>
		<!-- F3:搜索建议 -->
		<uni-card title="热门搜索" isFull>
			<view class="suggest-list">
				<uni-tag @click="tagSearch(item.name)" class='suggest' v-for="(item,i) in suggestList" :key="i"
				:text="item.name" :type="item.type" 
				circle></uni-tag>			
			</view>
		</uni-card>
		
		<!-- F4:返回顶部 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				kw:"",
				pager:"",
				suggestList:[
					{name:"神舟", type:"primary"},
					{name:"Apple", type:"error"},
					{name:"轻薄", type:"warning"},
					{name:"办公", type:"success"},
					{name:"联想", type:"primary"},
					{name:"Thinkpad", type:"error"},
					{name:"工作站", type:"warning"},
					{name:"游戏本", type:"success"},
					{name:"华硕", type:"primary"},
					{name:"雷神Z1000", type:"error"},
					{name:"MacBook", type:"warning"},
					{name:"T4100", type:"success"}
				]

			};
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			search(){
				let kw=this.kw.trim()
				if(kw=='') {
					uni.showToast({
						title:'请输入内容',
						icon:"error",
						duration:1000
					})
					return
				}	
				let url=this.$url.productList
				uni.showLoading({
					title:'商品搜索中'
				})
				uni.request({
					url,
					data:{kw},
					success:res=>{
						console.log(res.data)
						this.pager=res.data
						
					},
					fail: (err) => {
						console.log(err)
					},
					complete: () => {
						uni.hideLoading()
					}
				})
			},
			tagSearch(name){
				this.kw=name
				this.search()
				
			},
			
			
		},
	}
</script>

<style lang="scss">

.search-bar{
	display: flex;
	background-color: $xz-theme;
	align-items: center;
	.icon{
		
	}
	.input{
		flex: 1;
	}
}
	.suggest-list{
		display: flex;
		flex-wrap: wrap;
		.suggest{
			margin: $uni-spacing-col-sm - 2 $uni-spacing-row-sm;
		}
	}
</style>
